<template>
    <div>
        
        <div class="content-header">
            <div class="container">
               
            </div>
        </div>
   

        <!-- Main content -->
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8">
                        <!-- <el-input v-model="form.username" placeholder="Please input"></el-input> -->

                        <el-form>

                            <el-upload
                             :http-request="httpRequest"
                               :before-upload="beforeUpload"
                                :on-exceed="handleExceed"
                                :limit="1"
                                accept=".zip"
                                >

                                <el-button size="small" type="primary">选择文件</el-button>

                            </el-upload>
                        </el-form>

                        <el-button style="margin-left: 10px;" size="small" type="info" @click="uploadFile">上传文件</el-button>

                        <el-select v-model="form.selectedId" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.id" :label="item.name"
                                :value="item.id"></el-option>
                        </el-select>

                        <!-- <button type="button" class="btn btn-info ml-2">上传</button> -->
                    </div>

                </div>
                <!-- /.row -->
            </div>

        </div>
    </div>
</template>

<script>
import { get } from '@/utils/api'
import { ref } from 'vue'
import gconfig from '@/config/global_config'


export default {

    name: "uploadIndex",
    data() {
        return {
            // val: '',
            curlVal: '',
            paramsText: '',
            formParam: {
                postParams: ''
            },
            options: [],
            file: '',
            selectedId2: null,
            pxyFileList: [],
        
            // selectedId: null

        };
    },
    mounted() {
        this.fetchOptions();
    },
    methods: {
        handleExceed() {
            this.pxyFileList = [];
        },
        httpRequest(option) {
            this.pxyFileList.push(option)
        },
        uploadFile() {

            let formData = new FormData();
            formData.append("book_id",18);
            //formData.append("file", this.pxyFileList[0]);

            this.pxyFileList.forEach((x) => {
                formData.append('file', x.file)
            });

            //console.log("pxyFileList: ", this.pxyFileList)
            const response = fetch(gconfig.constants.API_ORIGIN + '/tool/upload', {
                headers: {
                    "Access-Control-Allow-Origin": "*",
                    //'Content-Type': 'multipart/form-data'
                },
                method: 'POST',
                body: formData,
                data: formData.file
            });
            if(response.ok) {
                const data = response.json();
                console.log(data);
            } else {
                console.log('上传失败');
            }
            //  request({
                
            //     url: '/pasture/plating/add',
            //     method: 'post',
            //     formData,
            //     data: formData.file
            // })

        },
        async fetchOptions() {
            // 发送异步请求
            var url = '/books'
            try {
                // 发送 application/json 类型的 POST 请求
                var retData = await get(url, { book_id: this.book_id }, 'form');
                this.options = retData.data

                // 发送 application/x-www-form-urlencoded 类型的 POST 请求 (取消注释以使用)
                // this.result = await post(url, data, 'form');
            } catch (error) {
                console.error('请求失败:', error);
            }
        },
        async getAll() {
            // 发送异步请求
            var url = '/chapter/get_all'
            try {
                // 发送 application/json 类型的 POST 请求
                var retData = await get(url, { book_id: this.book_id }, 'form');
                this.data = retData.data
                this.loadStaticHtml(this.data[0].children[0].url);
                // 发送 application/x-www-form-urlencoded 类型的 POST 请求 (取消注释以使用)
                // this.result = await post(url, data, 'form');
            } catch (error) {
                console.error('请求失败:', error);
            }

        },
    },
    setup() {
        //const upload = ref();
        const form = ref({
            username: '',
            selectedId: ''
        });
        const input = ref('')
        const uploadUrl = gconfig.constants.API_ORIGIN + '/tool/upload';
        //const selectedId = ref(null);
        // const handleExceed = (files) => {

        //     if (upload.value) {
        //         console.log("files: " + files)
        //         //upload.value.clearFiles();
        //         const file = files[0];
        //         file.uid = genFileId(); // 确保已经定义了 genFileId() 函数
        //         upload.value.handleStart(file);
        //         console.log("fileList after handling:", upload.value.fileList); // 查看更新后的文件列表
        //     }
        // };

        const beforeUpload = (file) => {
            console.log('File to upload:', file);
        };
        const onSuccess = (response, file, fileList) => {
            console.log('Upload success', response, file, fileList);
        };
        const onError = (error, file, fileList) => {
            console.log('Upload error', error, file, fileList);
        };
      
        return {
            form,
            uploadUrl,
            beforeUpload,
            onSuccess,
            onError,
            
            input
        };
    }
};
</script>

<!-- 
<script setup lang="ts">

import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'

const upload = ref<UploadInstance>()

const handleExceed: UploadProps['onExceed'] = (files) => {
    upload.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    upload.value!.handleStart(file)
}

const submitUpload = () => {
    upload.value!.submit()
}
</script> -->

<style scoped></style>

